@charset 'utf-8';

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
section, div, h1, h2, h3, p, ul, li {
  margin: 0;
  padding: 0;
}
html {
  font-size: (100vw / 1080) * 100;
}
body {
  background: #000 url('./assets/images/background-pot.jpg');
  background-size: .32rem .32rem;
  height: 100%;
  height: 100vh;
  overflow: hidden;
}
a {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent; 
}
img {
  border: none;
}

$border-color: #23577a;
$box-shadow-color: #455edd;

.whaley-brand {
  position: relative;
  margin: 0 auto;
  & .whaleyVR-title.title {
    margin-left: .1rem;
    & .label {
      display: inline-block;
      margin-top: -.5rem;
      font-size: .36rem;
      color: #63bbff;
      line-height: 1;
      vertical-align: .2rem;
    }
    & .pipe {
      display: inline-block;
      font-size: .56rem;
      color: #63bbff;
      margin: 0 .05rem;
      line-height: 1;
      vertical-align: .1rem;
    }
  }
}
.whaleyVR-title {
  &.title {
    position: relative;
    z-index: 2;
    margin-left: -.2rem;
    height: 1.33rem;
    line-height: 1.34rem;
    font-size: .42rem;
    color: #fff;
    &::before {
      display: inline-block;
      position: absolute;
      content: '';
      z-index: 1;
      left: 0;
      top: 0;
      width: .4rem;
      height: inherit;
      background: url('./assets/images/title.png') no-repeat left center;
      background-size: auto 100%;
    }
    & span.text {
      display: inline-block;
      height: inherit;
      padding: 0 1.4rem 0 0;
      margin-left: .4rem;
      background: url('./assets/images/title.png') no-repeat right center;
      background-size: auto 100%;
    } 
  }
}
.whaleyVR-linear-gradient__wrapper {
  position: relative;
  width: 8.8rem;
  margin: .25rem auto;
  padding: .07rem .07rem;
  border-radius: .06rem;
  background: linear-gradient(-45deg, transparent .65rem, $border-color 0);
  filter: drop-shadow(0 0 .08rem #c0f1ff);
  &::after {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    clip-path: polygon(0 0, 100% 0, 100% 81.5%, 85.5% 100%, 0 100%);    
  }
}
.whaley-brand__pic {
  position: relative;
  min-height: 6rem;
  height: fit-content;
  width: inherit;
  font-size: 0;
  border-radius: inherit;
  background: linear-gradient(-45deg, transparent .62rem, #112036 0, #295f76 100%);
  & img {
    max-width: 100%;
  }
  & .title {
    padding: .2rem 0;
    text-align: center;
    color: #fff;
    line-height: 1rem;
    overflow: hidden;
    font-size: .42rem;
  }
}
.gradient-text {
  box-sizing: border-box;
  border-radius: .06rem;
  box-shadow: 0 0 0 .03rem $border-color inset;
  background: linear-gradient(90deg, rgba(42, 120, 180, .6), rgba(120, 61, 135, .05));
  &::before {
    box-sizing: border-box;
    position: absolute;
    z-index: 2;
    content: '';
    top: 0;
    left: 0;
    width: .1rem;
    height: 100%;
    font-size: 0;
    background: #bedbff;
    box-shadow: 0 0 .12rem .05rem $box-shadow-color;
  }
}
